import ThemeUtils from './mod.theme';
// let f7 = null;
// let theme = null;
let stylesheet;
let globalTheme = 'light';
let globalBarsStyle = 'empty';
let globalCustomColor = '';
let globalCustomProperties = '';
let colors = [
  'red',
  'green',
  'blue',
  'pink',
  'yellow',
  'orange',
  'purple',
  'deeppurple',
  'lightblue',
  'teal',
  'lime',
  'deeporange',
  'gray',
  'black',
];

class Theme {
  static init() {
    if (!stylesheet) {
      stylesheet = document.createElement('style');
      document.head.appendChild(stylesheet);
    }
  }

  static colors() {
    return colors;
  }

  static generateStylesheet(color, barsStyle = 'fill') {
    var styles = '';
//     if (self.customColor) {
//       const colorThemeProperties = self.$app.utils.colorThemeCSSProperties(self.customColor);
//       if (Object.keys(colorThemeProperties).length) {
//         styles += `
// /* Custom color theme */
// :root {
//   ${Object.keys(colorThemeProperties)
//         .map(key => `${key}: ${colorThemeProperties[key]};`)
//         .join('\n  ')}
// }`;
//       }
//     }
    let colorVal = ThemeUtils.color.get_gradient(color);
    if (barsStyle === 'fill') {
      styles += `
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: ` + colorVal + `;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
  --f7-searchbar-input-bg-color: #fff;
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color:rgba(255,255,255,0.1);
  --f7-link-highlight-color:rgba(255,255,255,0.1);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
}
          `;
//       styles += `
// /* Invert navigation bars to fill style */
// :root,
// :root.theme-dark,
// :root .theme-dark {
//   --f7-bars-bg-color: var(--f7-theme-color);
//   --f7-bars-text-color: #fff;
//   --f7-bars-link-color: #fff;
//   --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
//   --f7-bars-border-color: transparent;
//   --f7-tabbar-link-active-color: #fff;
//   --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
//   --f7-searchbar-input-bg-color: #fff;
//   --f7-sheet-border-color: transparent;
//   --f7-tabbar-link-active-border-color: #fff;
// }
// .navbar,
// .toolbar,
// .subnavbar,
// .calendar-header,
// .calendar-footer {
//   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
//   --f7-link-highlight-color: var(--f7-link-highlight-white);
//   --f7-button-text-color: #fff;
//   --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
// }
//           `;
    }

    return styles.trim();
  }

  static set(style) {
    stylesheet.innerHTML = style;
  }
}

export default Theme;
